<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  <!-- Set render engine for 360 browser -->
  <meta name="renderer" content="webkit" />
  <!-- No Baidu Siteapp-->
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon" />
  <link rel="icon" type="image/png" href="/img/app-icon72x72.png" />
  <!-- Add to homescreen for Chrome on Android -->
  <meta name="mobile-web-app-capable" content="yes" />
  <link rel="icon" sizes="192x192" href="/img/app-icon72x72@2x.png" />
  <!-- Add to homescreen for Safari on iOS -->
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <meta name="apple-mobile-web-app-title" content="标题" />
  <link rel="apple-touch-icon-precomposed" href="/img/app-icon72x72@2x.png" />
  <!-- Tile icon for Win8 (144x144 + tile color) -->
  <meta name="msapplication-TileImage" content="/img/app-icon72x72@2x.png" />
  <meta name="msapplication-TileColor" content="#0e90d2" />
  <meta name="viewport" content="width=1200, user-scalable=yes">
  <title>活动预约-详情</title>
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <!-- /meta -->
  <script src="https://wenhuabu-media.bj.bcebos.com/front-end-engineer/Intangible-heritage/static/js/xianwenhauyun/pace.min.js"></script>
  <link href="https://wenhuabu-media.bj.bcebos.com/front-end-engineer/Intangible-heritage/static/js/xianwenhauyun/pace-theme-minimal.min.css" rel="stylesheet">
  <!--[if lte IE 9]>
  <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
  <!--[if gt IE 9]><!-->
  <script src="https://wenhuabu-media.bj.bcebos.com/front-end-engineer/Intangible-heritage/static/js/xianwenhauyun/jquery.3.3.1min.js"></script>
  <!--<![endif]-->
  <!-- /script -->
  <link rel="stylesheet" href="/css/main.min.css">

  <!-- /style -->
</head>

<body>
  <div class="page venue-detail">


    <section class="common_header_item">

      <header class="page__header">
        <div class="section__wrapper" style="width: 1220px;">
          <div class="column-inner clearfix">
            <div class="header-search">
              <!-- logo -->
              <h1 class="header-logo"><a href="/"><img src="img/poster/logo.png"  title="国家公共文化云" alt="国家公共文化云" /></a></h1>
              <!-- info user -->
              <div class="topbar-sign">
                <!-- <a class="iconfont user" href="/user-center-order.html">&#xe65f; </a>
                    <i class="separator">|</i>
                    <a href="#">1599999999</a>
                    <a href="#">退出</a> -->
                <a href="/signin.html">登录</a>
                <i class="separator">|</i>
                <a href="/signup.html">注册</a>
              </div>
              <!-- search -->
              <form class="form-header-search search-hover-active">
                <input type="text" placeholder="请输入关键字搜索" name="" id="">
                <a href="search-result.html">
                  <div class="search-button"><i class="iconfont icon-search" title="搜索">&#xe603;</i>
                  </div>
                </a>
              </form>

            </div>
          </div>
        </div>
      </header>

      <article class="section page__main_nav">
        <div class="section__wrapper" style="width: 1220px;">
          <div class="column-inner clearfix">
            <nav class="page__nav bar__inner j_follow_bar_nav">
              <li class="nav__item" data-nav="index"><span class="nav__title"><a href="index.html">首页</a></span>
              </li>
              <li class="nav__item" data-nav="news"><span class="nav__title"><a href="news.html">文化资讯</a></span>
              </li>
              <li class="nav__item" data-nav="live"><span class="nav__title"><a href="live.html">互动直播</a></span>
              </li>
              <li class="nav__item" data-nav="ancient"><span class="nav__title"><a href="ancient-culture.html ">古都文化</a></span>
              </li>
              <li class="nav__item" data-nav="activity"><span class="nav__title"><a href="activity.html">活动预约</a></span>
              </li>
              <li class="nav__item" data-nav="venue"><span class="nav__title"><a href="venue.html">场馆预定</a></span>
              </li>
              <li class="nav__item" data-nav="network"><span class="nav__title"><a href="network-train.html">网络培训</a></span>
              </li>
              <li class="nav__item" data-nav="travel"><span class="nav__title"><a href="culture-travel.html">文化旅游</a></span>
              </li>
              <li class="nav__item" data-nav="heritage"><span class="nav__title"><a href="culture-heritage.html ">文化非遗</a></span>
              </li>
              <!-- <li class="nav__item" data-nav="volunteer"><span class="nav__title"><a href="volunteer-event-archive.html">志愿服务</a></span></li> -->
              <!-- <li class="nav__item" data-nav="app"><span class="nav__title"><a href="#">社团管理</a></span></li> -->
              <li class="nav__item" data-nav="county"><span class="nav__title"><a href="county-view.html">区县风采</a></span>
              </li>
              <span class="follow__bar"></span>
            </nav>
          </div>
        </div>
      </article>
    </section>
    <!-- /header -->
    <main class="page__container">
      <section class="section section__breadcrumb">
        <div class="section__wrapper">
          <div class="pure-u-1">
            <div class="column-inner">
              <div class="nav__breadcrumb">
                <a class="item" href="index.html">首页</a>
                <span class="separator">&gt;</span>
                <a class="item" href="activity.html">活动预约</a>
                <span class="separator">&gt;</span>
                <a class="item active" href="javascript:void(0)">详情</a> 
              </div>
            </div>
          </div>
        </div>
      </section>
      <section class="section">
        <div class="section__wrapper">
          <div class="module clearfix">
            <div class="pure-u-2-3">
              <div class="column-inner">
                <div class="detail-title">
                  <h3>广西壮族自治区文化和旅游厅文化馆</h3>
                  <div class="live_iconfont">
                    <span>发布时间:2018-05-24 16:00</span>
                    <div class="live_info">
                      <span><i class="iconfont">&#xe62e;</i>222</span>
                      <span class="j_like"><i class="iconfont">&#xe7e1;</i> <i class="number">1615</i> </span>
                      <span class="j_collect"><i class="iconfont">&#xe870;</i>收藏</span>
                      <span><i class="iconfont">&#xe651;</i>分享</span>
                    </div>
                  </div>
                </div>
                <div class="detail-img">
                  <img src="http://via.placeholder.com/800x450" class="img-responsive" alt="" />
                </div>
              </div>
            </div>
            <div class="pure-u-1-3">
              <div class="column-inner">

                <div class="detail-info active_right">
                  <div class="detail-active-title">
                    展览信息
                  </div>
                  <p class="detail-line">
                    <img class="pos-img" src="../img/poster/exhibition-time.png" alt="">展览时间：周一至周日9:00-21:00</p>
                  <p class="detail-line">
                    <img class="pos-img" src="../img/poster/exhibition-post.png" alt="">主 办 方：通河县美术办</p>
                  <p class="detail-line">
                    <img class="pos-img" src="../img/poster/exhibition-art.png" alt="">艺术类型：少儿美术</p>
                </div>
              </div>
            </div>
          </div>
          <div class="column-list js_column_on">
            <span class="column_item active">展览详情</span><span class="column_item">展览展示</span>
          </div>
        </div>

        <div class="venue-content">
          <div class="section__wrapper">
            <div class="column-inner">
              <div class="deseditor clearfix">
                <p>
                  根据自治区党委、自治区人民政府的工作部署，今年3月，联席会议成员单位联合印发了《2019年“壮族三月三·八桂嘉年华”文化旅游消费品牌活动工作方案》，定于3月25日至4月25日，在全区各地集中开展“壮族三月三·八桂嘉年华”活动。4月4日上午，2019年“壮族三月三·八桂嘉年华”主会场活动将在广西民族博物馆隆重举行。
                </p>
                <br />
                <p style="text-align: center;">
                  <img src="http://via.placeholder.com/800x450" class="img-responsive" alt="" />
                </p>
                <br />
                <p>
                  根据自治区党委、自治区人民政府的工作部署，今年3月，联席会议成员单位联合印发了《2019年“壮族三月三·八桂嘉年华”文化旅游消费品牌活动工作方案》，定于3月25日至4月25日，在全区各地集中开展“壮族三月三·八桂嘉年华”活动。4月4日上午，2019年“壮族三月三·八桂嘉年华”主会场活动将在广西民族博物馆隆重举行。
                </p>
              </div>
            </div>

          </div>
        </div>
        <!-- /venue-content -->
        <div class="venue-content" style="display: none;">
          <div class="section__wrapper">
            <div class="column-inner">
              <div class="exhibition-detail-list"></div>
              <nav class="page-pagination" aria-label="page-pagination">
                <ul class="pagination">
                  <li class="item previous"><a href="#" aria-label="Previous" aria-hidden="true">首页</a>
                  </li>
                  <li class="item active"><a href="#">1</a>
                  </li>
                  <li class="item"><span>2</span>
                  </li>
                  <li class="item"><a href="#">3</a>
                  </li>
                  <li class="item"><a href="#">4</a>
                  </li>
                  <li class="item"><a href="#">5</a>
                  </li>
                  <li class="item"><a href="#">6</a>
                  </li>
                  <li class="item next"><a href="#" aria-label="Next" aria-hidden="true">下一页</a>
                  </li>
                  <li class="item">跳转到</li>
                  <li class="item">
                    <input type="text" />
                  </li>
                  <li class="item">页</li>
                  <li class="item active"><a href="#">&nbsp;&nbsp;GO&nbsp;&nbsp;</a>
                  </li>
                  <li class="item news-number">当前共有<i>1000</i>条</li>
                </ul>
              </nav>
            </div>
          </div>
        </div>
        <!-- /venue-content -->
      </section>
    </main>

    <footer class="page__footer">
      <section class="footer-main">
        <div class="section__wrapper footer-top">
          <div class="footer-r">
            <img src="../img/footer-logo/fool-logo.png" alt="">
            <div class="region">
              <span>热线：192832083</span>
              <span>地址：黑龙江省哈尔滨市通河县松花江大街23号正西方向90米</span>
            </div>
            <div class="relation">
              <span>邮箱：192832083s33f</span>
              <span>传真：192832083s33f</span>
            </div>
          </div>
          <div class="footer-middle">
            <div class="middle-title">友情链接</div>
            <div class="middle-href">
              <a href="#">国家公共文化云</a>
              <a href="#">中国数字文化网</a>
              <a href="#">哈尔滨市文化和旅游厅</a>
            </div>
            <div class="middle-href">
              <a href="#">国家公共文化云</a>
              <a href="#">中国数字文化网</a>
              <a href="#">哈尔滨市文化和旅游厅</a>
            </div>
          </div>
          <div class="footer-qr">
            <img src="../img/footer-logo/qr.png" alt="">
            <div class="qr-title">官方微信</div>
          </div>
        </div>
      </section>
      <section class="footer-bot-main">
        <div class="section__wrapper footer-bot">
          版权所有Copyright © 2020通河县文化与旅游厅 黑ICP备XXXXXXXXXX号
        </div>
      </section>
    </footer>

  </div>
  <!-- /page -->

  <script src="https://culturetv.hanyastar.com.cn/national_culture_file/pcjs/underscore-min-1.8.3/underscore-min.js"></script>
  <script src="https://wenhuabu-media.bj.bcebos.com/front-end-engineer/Intangible-heritage/static/js/xianwenhauyun/bowser.min.js"></script>
  <script src="https://wenhuabu-media.bj.bcebos.com/front-end-engineer/Intangible-heritage/static/js/xianwenhauyun/swiper3.4.2.jquery.min.js"></script>
  <link href="https://wenhuabu-media.bj.bcebos.com/front-end-engineer/Intangible-heritage/static/js/xianwenhauyun/swiper3.4.2.min.css" rel="stylesheet">
  <script src="https://culturetv.hanyastar.com.cn/national_culture_file/pcjs/layer-3.0.3/layer.min.js"></script>



  <!-- 前端交互脚本 -->
  <script src="js/common/xtab.js"></script>
  <script src="js/common/xbar.js"></script>
  <script src="js/common/util.js"></script>

  <script src="js/app.js"></script>
  <script src="/js/common.min.js"></script>

  <!-- /script -->

</body>


<script type="text/html" id="temple">
  <div class="pure-u-1-5 listIndex">
      <div class="column-inner module">
        <div class="exhibition-list">
          <div class="object">
               <img src="http://via.placeholder.com/274x186" height="186" class="img-responsive" alt="" />
          </div>
          <div class="caption">
            <div class="headline">
              <a href="#">广西壮族自治区群众艺术馆</a>
            </div>
            <div class="abstract">
              <i class="iconfont">&#xe8a9;</i>: 2018-05-24 
            </div>
          </div>
        </div>
      </div>
    </div>
</script>

<script type="text/html" id="layer-temple">
  <div class="exhibition-centent">
        <div class="show-poster">
            <div class="exhibition-show">
                <div class="poster">
                    <img  class="exhibition-poster" src="http://via.placeholder.com/974x548" width="974" height="548" alt="">
                </div>
                <div class="exhibition-title">美好的事儿</div>
                <div class="exhibition-ntroduction">作品《美好的事儿》入选第六届全国少儿书画 艺术大展，获一等奖。并被主办单位收藏，并结 集出版。 作品《美好的事儿》入选“2006中`韩现代美术 ”，并获“优秀奖”。</div>
                <div class="exhibition-time"> 发布时间 <span> 2020.08.20 16:09:27</span></div>
            </div>
            
        </div>
        <div class="show-left">
            <div class="swiper-container exhibition-swiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" data-active="数据">
                        <img src="http://via.placeholder.com/100x56" alt="">
                    </div>
                    <div class="swiper-slide" data-active="数据1">
                        <img src="http://via.placeholder.com/100x56" alt="">
                    </div>
                    <div class="swiper-slide" data-active="数据2">
                        <img src="http://via.placeholder.com/100x56" alt="">
                    </div>
                    <div class="swiper-slide" data-active="数据3">
                        <img src="http://via.placeholder.com/100x56" alt="">
                    </div>
                    <div class="swiper-slide" data-active="数据">
                        <img src="http://via.placeholder.com/100x56" alt="">
                    </div>
                    <div class="swiper-slide" data-active="数据">
                        <img src="http://via.placeholder.com/100x56" alt="">
                    </div>
                    <div class="swiper-slide" data-active="数据">
                        <img src="http://via.placeholder.com/100x56" alt="">
                    </div>
                    <div class="swiper-slide" data-active="数据">
                        <img src="http://via.placeholder.com/100x56" alt="">
                    </div>
                    <div class="swiper-slide" data-active="数据">
                        <img src="http://via.placeholder.com/100x56" alt="">
                    </div>
                    <div class="swiper-slide" data-active="数据">
                        <img src="http://via.placeholder.com/100x56" alt="">
                    </div>
                    <div class="swiper-slide" data-active="数据">
                        <img src="http://via.placeholder.com/100x56" alt="">
                    </div>
                    <div class="swiper-slide" data-active="数据">
                        <img src="http://via.placeholder.com/100x56" alt="">
                    </div>
                    <div class="swiper-slide" data-active="数据">
                        <img src="http://via.placeholder.com/100x56" alt="">
                    </div>
                    <div class="swiper-slide" data-active="数据">
                        <img src="http://via.placeholder.com/100x56" alt="">
                    </div>
                </div>
            </div>
            <div class="swiper-button-next"><span class="iconfont">&#xe673;</span></div>
            <div class="swiper-button-prev"><span class="iconfont">&#xe673;</span></div>
        </div>
        
    </div>
</script>

<script>
  $(document).ready(function () {
    var listIndex = 0; //默认选中下标
    $(".js_column_on").on('click', '.column_item', function () {
      var indexV = $(this).index();
      $(this).addClass("active").siblings().removeClass("active");
      var listObj = $(".venue-content").eq(indexV);
      listObj.show();
      listObj.siblings(".venue-content").hide();
    });

    // 点赞
    $(".j_like").on("click", function () {
      var iconfont = "&#xe7e1;";
      var _thisNumber = $(this).find(".number").html() * 1;
      $(this).toggleClass("live_ture");
      if ($(this).hasClass("live_ture")) {
        iconfont = "&#xe7e2;";
        _thisNumber++
      } else {
        _thisNumber--
      }
      $(this).html('<i class="iconfont">' + iconfont + '</i> <i class="number">' + _thisNumber + '</i>');
    })

    // 点赞

    $(".j_collect").on("click", function () {
      var iconfont = "&#xe86f;";
      var collect = "收藏";
      $(this).toggleClass("live_ture");
      if ($(this).hasClass("live_ture")) {
        collect = "已收藏"
      } else {
        iconfont = "&#xe870;";
      }
      $(this).html('<i class="iconfont">' + iconfont + '</i>' + collect);
    })

    // 模拟
    var activityHtml = "";
    for(let i = 0;i<8;i++){
        activityHtml += $("#temple").html()
    }
    $(".exhibition-detail-list").html(activityHtml);

    $(".exhibition-detail-list").on("click",".listIndex",function(){
        listIndex = $(this).index();
        exhibitionLayer(listIndex);
    })
    
    function exhibitionLayer(index){
        layer.open({
        type: 1,
        title: false,
        area: ['1150px', 'auto'], //宽高
        shade: 0.6,
        shadeClose: true,
        scrollbar: false,
        skin: 'exhibition-skin',
        content: $("#layer-temple").html(), //内容
        success: function () {
            var mySwiper = new Swiper('.exhibition-swiper', {
                direction : 'vertical',
                spaceBetween: 10,
                slidesPerGroup : 1,
                slidesPerView: 'auto',
                initialSlide:index,
                touchRatio: 0.2,
                slideToClickedSlide: true,
                nextButton: '.swiper-button-next',
                prevButton: '.swiper-button-prev',
               
            })
            $(".swiper-slide").eq(index).addClass("exhibition-active")
            var exchange = true;
            $(".exhibition-swiper").on("click",".swiper-slide",function(){
                if(exchange){
                    $(this).addClass("exhibition-active").siblings().removeClass("exhibition-active")
                    var data =  $(this).data("active");
                    exchange = false;
                    $(".exhibition-show").hide()
                    setTimeout(function(){
                        exchange = true;
                        $(".exhibition-show").fadeIn()
                        console.log(data);
                        $(".exhibition-poster").attr("src","https://wenhuabu-media.bj.bcebos.com/front-end-engineer/Intangible-heritage/qlimg/aisibg.jpg")
                    },500)
                }
               
                
            })
           
        }
    });
    }

   
  });
</script>

</html>